<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>业务统计</title>
<style type="text/css">
.dt-table {
	border-color: white;
	border-width: 2px;
	border-style: solid;
	color: white;
	width: 100%;
	height: 100%;
}

.dt-table tr {
	height: 5%;
}

.dt-table tr th, .dt-table tr td {
	border-color: white;
	border-width: 2px;
	border-style: solid;
	font-size: 16px;
	text-align: center;
}

.tb-title {
	text-align: center;
	font-size: 2.5em;
	color: white;
	padding-top: 15px;
}

.all-yewu {
	height: 10%;
	text-align: left;
	font-size: 18px;
	color: white;
}
</style>
<script src="jquery-2.2.3.js"></script>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="bootstrap/js/bootstrap.js"></script>
</head>
<body style="width: 1920px; height: 1080px">
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div class="container-fluid" style="height: 100%">
		<div class="row"
			style="height: 50%; background-color: rgb(5, 61, 109)">
			<div id="topLeft" class="col-md-12"
				style="height: 100%; padding-top: 10px"></div>
			<div id="topRight" class="col-md-8"
				style="height: 100%; padding-top: 10px; padding-left: 30px; padding-right: 0px"></div>
			<div id="topRightTable" class="col-md-4"
				style="height: 100%; padding-left: 0px">
				<div class="tb-title" style="width: 100%;">近10日业务显示</div>
				<table class="dt-table" style="height: 80%">

					<tbody>
						<tr>
							<th style="width: 50%">日期</th>
							<th style="width: 50%">业务量</th>
						</tr>
						<tr>
							<td>2017-05-25</td>
							<td>1201</td>
						</tr>
						<tr>
							<td>2017-05-26</td>
							<td>1503</td>
						</tr>
						<tr>
							<td>2017-05-27</td>
							<td>1350</td>
						</tr>
						<tr>
							<td>2017-05-28</td>
							<td>1241</td>
						</tr>
						<tr>
							<td>2017-05-29</td>
							<td>3622</td>
						</tr>
						<tr>
							<td>2017-05-30</td>
							<td>1803</td>
						</tr>
						<tr>
							<td>2017-05-31</td>
							<td>2351</td>
						</tr>
						<tr>
							<td>2017-06-01</td>
							<td>4210</td>
						</tr>
						<tr>
							<td>2017-06-02</td>
							<td>3211</td>
						</tr>
						<tr>
							<td>2017-06-03</td>
							<td>3214</td>
						</tr>
					</tbody>
				</table>


			</div>
		</div>
		<div class="row"
			style="height: 50%; background-color: rgb(5, 61, 109); padding-top: 10px !important;">
			<div id="bottomLeft" class="col-md-12"
				style="height: 100%; padding: 0px">
				<div class="col-md-8"
					style="height: 100%; padding: 0px; overflow: visible">
					<div
						style="width: 100%; margin-left: 20px; margin-top: -10px; height: 100%; padding: 10px; padding-left: 20px !important;">
						<div class="all-yewu" style="width: 120%;">
							总业务量：3,047,980笔<br /> 总办理窗口数：65个，办理中窗口数：32个
						</div>
						<table cellpadding="0" cellspacing="0" class="dt-table"
							style="height: 90%; margin-top: 5px !important">

							<tbody>
								<tr>
									<th style="width: 40%">业务类型</th>
									<th style="width: 30%">业务量</th>
									<th style="width: 30%">比例</th>
								</tr>
								<tr>
									<td>入住登记</td>
									<td>3510</td>
									<td>41.6</td>
								</tr>
								<tr>
									<td>缴纳罚款</td>
									<td>2301</td>
									<td>2.29</td>
								</tr>
								<tr>
									<td>入住预订</td>
									<td>2101</td>
									<td>12.53</td>
								</tr>
								<tr>
									<td>交通违法处理</td>
									<td>1503</td>
									<td>4.10</td>
								</tr>
								<tr>
									<td>餐饮订单</td>
									<td>2512</td>
									<td>14.1</td>
								</tr>
								<tr>
									<td>车辆收入</td>
									<td>4051</td>
									<td>8.03</td>
								</tr>
								<tr>
									<td>批发零售</td>
									<td>1261</td>
									<td>5.12</td>
								</tr>
								<tr>
									<td>娱乐</td>
									<td>3241</td>
									<td>10.14</td>
								</tr>
								<tr>
									<td>其它</td>
									<td>210</td>
									<td>1.82</td>
								</tr>
							</tbody>
						</table>


					</div>
				</div>
				<div class="col-md-8"
					style="height: 100%; padding: 0px; overflow: visible">
					<div id="pie" style="width: 100%; height: 100%"></div>
				</div>
				<div class="col-md-8"
					style="height: 100%; padding: 0px; overflow: visible">
					<div id="bottomLeftRight" style="width: 100%; height: 100%"></div>
				</div>
			</div>

			<div class="col-md-12" style="height: 100%; padding: 0px">
				<div id="bottomRight" style="width: 100%; height: 100%"></div>
			</div>
		</div>
	</div>

	<script type="text/javascript">
    var topLeft = echarts.init(document.getElementById("topLeft"));
    var topRight = echarts.init(document.getElementById("topRight"));
    var bottomLeftRight = echarts.init(document.getElementById("bottomLeftRight"));
    var pie = echarts.init(document.getElementById("pie"));
    var bottomRight = echarts.init(document.getElementById("bottomRight"));
    var topLeftOption = {
        title: {
            text: '入住高峰分析',
            subtext: '入住数量：340',
            subtextStyle: {
                color: 'rgb(255,255,255)',
                fontSize: 14
            },
            textAlign: 'center',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 22,
                fontWeight: "bolder",
                color: 'rgb(255,255,255)'
            },

            left: '50%',
            top: "1.5%"
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgb(107,152,177)',
                    type: "dashed"
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'rgb(255,255,255)'
                }
            },
            data: ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00','20:00','22:00']
        }],
        yAxis: [{
            type: 'value',
            axisTick: {
                show: false
            },

            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 14
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'rgb(255,255,255)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgb(107,152,177)',
                    type: "dashed"
                }
            }
        }],
        series: [{
            type: 'line',
            smooth: true,
            symbolSize: 7,
            label: {
                normal: {
                    show: true,
                    position: [15, -15],
                    textStyle: {
                        color: 'rgb(255,255,255)',
                        fontSize: 14
                    }
                }
            },
            lineStyle: {
                normal: {
                    width: 3
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgb(194,144,190)'
                }
            },
            data: [150, 200, 160, 135, 100, 142, 152, 89, 98, 87,95,150]
        }]
    };
    //------------------------------------------------------------------------------------------------------------------------
    var topRightOption = {
        title: {
            text: '今日业务',
            subtext: '总业务量2000笔',
            subtextStyle: {
                color: 'rgb(255,255,255)',
                fontSize: 14
            },
            textAlign: 'center',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 22,
                fontWeight: "bolder",
                color: 'rgb(255,255,255)'
            },

            left: '50%',
            top: "1.5%"
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                data:  ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00','20:00','22:00'],
                axisTick: {
                    alignWithLabel: false
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgb(255,255,255)'
                    }
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisTick: {
                    show: false
                },

                axisLabel: {
                    margin: 10,
                    textStyle: {
                        fontSize: 14
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgb(255,255,255)'
                    }
                },
                splitLine: {
                    show: false
                }
            }


        ],
        series: [
            {
                type: 'bar',
                barWidth: '90%',
                itemStyle: {
                    normal: {

                        color: function (params) {

                            var colorList = [
                                '#E55B8D', '#BD5EAF', '#8AB423', '#E2B82A', '#1589B3', '#E55B8D', '#BD5EAF', '#8AB423','#E55B8D', '#BD5EAF', '#8AB423','#E2B82A'
                            ];
                            return colorList[params.dataIndex]
                        },
                        //以下为是否显示，显示位置和显示格式的设置了
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{c}',
                            textStyle: {
                                color: 'rgb(255,255,255)',
                                fontSize: 10
                            }

                        }
                    }
                },
                data: [150, 200, 160, 135, 100, 142, 152, 89, 98, 87,95,150]
            }
        ]
    };
    //--------------------------------------------------------------------------------------------------------------
    var bottomRightOption = {
        title: {
            text: '近30日业务分布图',
            subtext: '30日业务总量43,390笔',
            subtextStyle: {
                color: 'rgb(255,255,255)',
                fontSize: 14
            },
            textAlign: 'center',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 22,
                fontWeight: "bolder",
                color: 'rgb(255,255,255)'
            },

            left: '50%',
            // top: "1.5%"
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            splitLine: {
                show: true,
                interval: 3,
                lineStyle: {
                    color: 'rgb(107,152,177)',
                    type: "dashed"
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'rgb(255,255,255)'
                }
            },

            data: [
                '10', '11', '12', '13', '14', '15', '16', '17', '18', '19',
                '21', '22', '23', '24', '25', '26', '27', '28', '29', '30',
                '02', '03', '04', '05', '06', '07', '08', '09', "10", "11"
            ]
        }],
        yAxis: [{
            type: 'value',
            axisTick: {
                show: false
            },

            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 14
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'rgb(255,255,255)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgb(107,152,177)',
                    type: "dashed"
                }
            }
        }],
        series: [{
            type: 'line',
            smooth: true,
            symbolSize: 8,
            //symbol:'star',//拐点样式
            showAllSymbol: false,

            areaStyle: {
                normal: {
                    color: 'rgb(93,159,27)'
                }
            },
            label: {
                normal: {
                    show: true,
                    position: "insideBottomLeft"
                }
            },
            lineStyle: {
                normal: {
                    width: 3
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgb(7,84,34)'
                }
            },

            data: symbolData(5, 8, [1330, 1500, 1600, 1550, 1500,
                1400, 1350, 1300, 1290, 1400,
                1330, 1430, 1500, 1530, 1400,
                1200, 1330, 1200, 1500, 1800,
                1850, 1900, 1930, 1950, 1900,
                1750, 1500, 950, 1230, 1500
            ])
        }]
    };

    //data隔几个显示
    function symbolData(number, size, data) {
        var returnData = [];

        for (var i = 0; i < data.length; i++) {
            var point = {
                symbolSize: 0,
                label: {
                    normal: {
                        position: [20, -10],
                        show: false,
                        textStyle: {
                            color: 'rgb(255,255,255)',
                            fontSize: 14
                        }
                    }
                }
            }
            point.value = data[i];
            if (i != 0 && i % (number - 1) == 0) {
                point.symbolSize = size;
                point.label.normal.show = true;
            }
            returnData.push(point);
        }
        return returnData;
    }
    //------------------------------------------------------------------------------------------------------------
    var topTenOption = {
        title: {
            text: '业务TOP10统计（30天）',
            textAlign: 'center',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 22,
                fontWeight: "bolder",
                color: 'rgb(255,255,255)'
            },

            left: '50%',
            //top: "1.5%"
        },
        grid: {
            left: '3%',
            right: '15%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: false,
            //min: -1000,
            max: 50000,
            //nameGap: 10,
            splitNumber: 1,
            splitLine: {
                show: true,
                interval: 3,
                lineStyle: {
                    color: 'rgb(107,152,177)',
                    type: "dashed"
                }
            },

            axisLine: {

                lineStyle: {
                    color: 'rgb(255,255,255)'
                }
            },
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'category',
            axisTick: {
                show: false
            },
            inside: true,
            axisLabel: {
                margin: 2,
                textStyle: {
                    fontSize: 9
                }
            },
            axisLine: {
                lineStyle: {
                    color: 'rgb(255,255,255)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgb(107,152,177)',
                    type: "dashed"
                }
            },

            data: ["其它","娱乐", "批发零售", '车辆收入','餐饮订单','交通违法处理','入住预订','缴纳罚款','入住登记',  ]

        },
        series: [
            {
                type: 'bar',
                barWidth: '90%',
                barMinHeight: 20,
                itemStyle: {
                    normal: {
                        color: function (params) {

                            var colorList = [
                                '#E55B8D', '#BD5EAF', '#8AB423', '#E2B82A', '#1589B3', '#E55B8D', '#BD5EAF', '#8AB423', '#E55B8D'
                            ];
                            return colorList[params.dataIndex]
                        },
                        //以下为是否显示，显示位置和显示格式的设置了
                        label: {
                            show: true,
                            position: 'right',
                            formatter: '{c}',
                            textStyle: {
                                color: 'rgb(255,255,255)',
                                fontSize: 10
                            }
                        }
                    }
                },
                data: [1812, 8541,1848,1200, 12000, 4800, 1350, 1603, 19411]
            }

        ]
    };
    //---------------------------------------------------------------------------------------------------------------
    var pieOption = {
        title: {
            text: '业务数据总览',
            textAlign: 'center',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 22,
                fontWeight: "bolder",
                color: 'rgb(255,255,255)'
            },
            left: '50%'
        },

        legend: {
            orient: 'vertical',
            bottom: '10%',
            data: ['入住登记','缴纳罚款','入住预订','交通违法处理','餐饮订单','车辆收入',"批发零售","娱乐","其它"],
            textStyle: {
                fontWeight: 'normal',
                fontSize: 10,
                color: 'rgb(255,255,255)'
            }
        },
        series: [
            {
                type: 'pie',
                radius: '50%',
                startAngle: 0,
                center: ['50%', '35%'],
                label: {
                    normal: {
                        textStyle: {
                            color: 'rgb(255,255,255)'
                        }
                    }
                },
                data: [
                    {value: 335, name: '入住登记', textStyle: {color: 'white'}},
                    {value: 310, name: '缴纳罚款'},
                    {value: 234, name: '入住预订'},
                    {value: 135, name: '交通违法处理'},
                    {value: 1548, name: '餐饮订单'},
                    {value: 234, name: '车辆收入'},
                    {value: 234, name: '批发零售'},
                    {value: 234, name: '娱乐'},
                    {value: 122, name: '其它'}	
                ],
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: '{d}%'
                        },
                        labelLine: {
                            show: true,
                            //length:'1',
                            // length2:'2',
                            lineStyle: {
                                color: 'rgb(255,255,255)'
                            }
                        }
                    },
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }

                }
            }
        ],
        color: ['rgb(21,137,179)', 'rgb(17,120,155)', 'rgb(187,152,36)', 'rgb(226,184,42)', 'rgb(116,149,30)',
            'rgb(138,180,35)', 'rgb(160,73,146)', 'rgb(189,94,175)', 'rgb(185,62,107)']
    };


    topLeft.setOption(topLeftOption);
    topRight.setOption(topRightOption);
    bottomRight.setOption(bottomRightOption);
    bottomLeftRight.setOption(topTenOption);
    pie.setOption(pieOption);
</script>
</body>
</html>